<template>
	<view>
		<view class="cu-bar search bg-white searchs">
			<view class="search-form round bot_border">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" v-model="neir"  @input="inputchange" type="text" placeholder="搜索" confirm-type="search"></input>
			</view>
		</view>
		<scroll-view scroll-y class="indexes indexes1" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true">
			<block v-for="(item,index) in list" :key="index">
				<view :class="'indexItem-' + item.letter" :id="'indexes-' + item.letter" :data-index="item.letter">
					<view class="padding" v-if="item.data">{{item.letter}}</view>
					<view class="cu-list menu-avatar no-padding">
						<!-- @click.stop="friendDetails(items.id)" -->
						<view class="cu-item" v-for="(items,sub) in item.data" :key="sub">
							<checkbox-group class="block" @change="CheckboxChange(items)">
								<view class="xuanze">
									<checkbox class='round blue' :class="items.checked?'checked':''" :checked="items.checked?true:false" :value="items.ids"></checkbox>
								</view>
								<image class="cu-avatar round lg" :src="items.avatar?basl +items.avatar  : avatar"></image>
								<view class="content">
									<view class="men-text">{{items.nickname}}</view>
									<view class="text-gray text-sm">
										{{items.sign}}
									</view>
									<!-- <view v-if="item.is_friend == 2" style="color: #094DCC;">陌生人</view> -->
								</view>
							</checkbox-group>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur">
					{{item.letter}}</view>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{listCur}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				neir: '',
				listCurID: '',
				list: [],
				listCur: '',
				basl: this.$common.baseUrl,
				num: '', //新消息数量
				idList: [],
				avatar: uni.getStorageSync('noavatar'),
			};
		},
		onLoad() {
		},
		onShow() {
			this.$msgchat.initwork();
			this.initData();
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		//右上角角标
		onNavigationBarButtonTap(e) {
			// #ifdef APP-PLUS
			var webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				text: '完成' + '(' + '1' + ')',
			});
			// #endif
			if(this.idList.length <= 0){
				return;
			}
			var obj = {
				source: 1, //1 手机号
				friend_id: this.idList.join(',')
			}
			this.$common.requests('/api/Friend_add/add', obj).then(res => {
				if(res.data.code==1){
					this.$api.msg(res.data.msg);
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/message/message'
						})
					}, 800)
				}else{
					this.$api.msg(res.data.msg);
				}
				
			})
		},
		methods: {
			//搜索
			inputchange(e){
				let up ={
					phonearray: e.detail.value
				}
			    this.$common.requests('/api/friend_add/phonelist', up).then(res => {
					this.list = res.data.data;
					if(res.data.code != 1){
						this.$api.msg(res.data.msg)
					}
				})
			},
			CheckboxChange(items) {
				items.checked = !items.checked;
				if (this.idList.indexOf(items.ids) == -1) {
					this.idList.push(items.ids)
				} else {
					this.idList.splice(this.idList.indexOf(items.ids), 1)
				}
			},

			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].letter;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				// let y = e.touches[0].clientY,
				// 	offsettop = this.boxTop,
				// 	that = this;
				// //判断选择区域,只有在选择区才会生效
				// if (y > offsettop) {
				// 	let num = parseInt((y - offsettop) / 20);
				// 	this.listCur = that.list[num].letter
				// };
			},
			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].letter;
						that.movableY = i * 20
						return false
					}
				}
			},
			//好友列表
			initData() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this;
				// var that = this;
				var lianlist = '';
				// lianlist = '18652263502,18811013239,18309213135,18516003935,18511219970,18952137647,15225219634,18652263502,15162237530,15150093867,13225576448,15385712951,15205574150,15862118677,15295480192,15905207830,13395234169,15852472798,18086799326,18252115925,19851603610,18861125799,15922477661,18852107103,15715211926,18861763397,15152082422,18052118027,15922491251,18260712137,18260714261,15052003659,18351866911,18752134340,18358078065,18796260828,13645215920,18816236862,18052137963,13852082842,13213767656,13305208525,15952236993,15252118137,13375135836,15262077273,15852176121,15152466262,15351637910,15250912762,13115213223,15052980733,18913480680,15262017568,17621390910,18652253004,15162136540,18752106224,18796298550,18452644836,13914786620,15205217733,15715211335,18252100955,18262900083,18503016443,18178292546,057156215888,106575258192144,057128121818,15566532480,'
				// 获取通讯录对象
				plus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function( addressbook ) {
					// 查找联系人
					addressbook.find(["displayName","phoneNumbers"],function(contacts){
						var list = contacts;	
						list.forEach((item, index) =>{
							if(item.phoneNumbers.length>0){
								lianlist += item.phoneNumbers[0].value.replace(/\s+/g,"") +','
							}
						})
						that.$common.requests('/api/friend_add/phonelist', {phonearray: lianlist}).then(res =>{
							uni.hideLoading();
							if (res.data.code == 1) {
								that.list = res.data.data;
								that.listCur = that.list[0].letter
								uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
									that.boxTop = res.top
								}).exec();
								uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
									that.barTop = res.top
								}).exec()
							}
						})
						uni.hideLoading();
					}, function () {
						uni.showToast({
						    title: '获取联系人失败',
						    duration: 2000
						})
						uni.hideLoading();
					},{multiple:true});
				}, function ( e ) {
					uni.hideLoading();
					uni.showToast({
					    title: '获取通讯录对象失败:' + e.message,
					    duration: 2000
					})
				});
				
				// this.$common.requests('/api/Group/usegrouplist', obj).then(res => {
				// 	uni.hideLoading();
				// 	if (res.data.code == 1) {
				// 		this.list = res.data.data;
				// 		this.listCur = this.list[0].letter
				// 		uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				// 			this.boxTop = res.top
				// 		}).exec();
				// 		uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				// 			this.barTop = res.top
				// 		}).exec()
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.searchs {
		padding: 10upx 0 10upx 0;
		background: #FFF;
	}

	.round {
		border-radius: 0upx;
		background: #fff;
	}

	.bot_border {
		border-bottom: 1px solid #E8E8E8;
	}

	.indexes {
		position: relative;
	}

	.indexes1 {}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}

	.padding {
		background: #F5F4F9;
	}

	.cu-item {
		justify-content: flex-start !important;
	}

	.xuanze {
		margin: 0 30upx;
	}

	.lg {
		border-radius: 50%;
	}

	.content {
		left: 220upx !important;
	}
	.block{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
</style>
